<template>
  <div :class="{'mobile-table-list': showMobilePage}" class="table-list">
    <Title title="选择上刊账号" style="margin:16px 0;">
      <span class="title-tip">仅合作方式为“商务独家”或“经纪独家”的账号才可发起上刊申请流程</span>
    </Title>
    <div v-if="!showMobilePage" class="filter">
      <FilterInput ref="FilterToolRef" v-model="paramsObj" :filter-list="filterList" show-search-btn @handelClick="queryClick" @queryEmpty="queryEmpty" />
    </div>
    <div v-loading="listLoading" style="min-height: 300px;">
      <u-table
        v-if="list.items.length"
        ref="tableRef"
        :data="list.items"
        :height="setTableHeight"
        :row-height="49"
        :border="true"
        beautify-table
        header-drag-style
        use-virtual
        class="fb-table"
        element-loading-text="加载中..."
        empty-text="暂无数据"
        header-cell-class-name="order-data-header-cell"
        fit
        hightlight-current-row>
        <u-table-column fixed="left" align="center" label="" min-width="50">
          <template slot-scope="scope">
            <el-radio v-model="singleSelect" :label="scope.row.resourceId" @change="change($event, scope.row)"><span/></el-radio>
          </template>
        </u-table-column>
        <u-table-column align="left" label="账号名称" min-width="110">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.accountName" is-can-click @handelClick="toAccount(scope.row.resourceId)"/>
          </template>
        </u-table-column>
        <u-table-column align="left" label="平台" min-width="110">
          <template slot-scope="scope">
            <div class="flex-center">
              <PlatformIcon :data="scope.row.platformName" />
              {{ scope.row.platformName || '--' }}
            </div>
          </template>
        </u-table-column>
        <u-table-column align="left" label="账号ID" min-width="110">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.accountId" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="性别" min-width="60">
          <template slot-scope="scope">
            <ToolTip v-if="typeof scope.row.gender === 'number'" :content="scope.row.gender ? '女' : '男'" />
            <div v-else>--</div>
          </template>
        </u-table-column>
        <u-table-column align="left" label="签约状态" min-width="160">
          <template slot-scope="scope">
            <el-tooltip v-if="scope.row.signDetailStatus || scope.row.signDetailStatus === 0" :open-delay="800" class="sign-status-tooltip" placement="top">
              <div slot="content" class="tooltip-content">
                <div class="account-item-tip"> {{ scope.row.signDetailStatus | signStatusFilter }} <br></div>
              </div>
              <StatusText
                :color="getColor(scope.row.signDetailStatus)"
                :text="scope.row.signDetailStatus | signStatusFilter"
              />
            </el-tooltip>
            <div v-else>--</div>
          </template>
        </u-table-column>
        <u-table-column align="left" label="合作方式" min-width="110">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.cooperationOption | cooperationStatusFilter" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="上刊状态" min-width="110">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.journalStatus | journalStatusFilter" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="标签" min-width="200">
          <template slot-scope="scope">
            <TagSelect v-model="scope.row.tag" mode="list" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="主页链接" min-width="110">
          <template slot-scope="scope">
            <ToolTip :content="scope.row.link" />
          </template>
        </u-table-column>
        <u-table-column align="left" label="粉丝量" min-width="110">
          <template slot-scope="scope">
            <ToolTip
              v-if="scope.row.fans"
              :content="scope.row.fans | numberTextFormat(2)"
              :tool-tip="scope.row.fans | moneyFilter" />
            <span v-else>--</span>
          </template>
        </u-table-column>
      </u-table>
      <EmptyPlaceholder v-else-if="!list.isInit" slot="empty" empty-text="暂无数据" mode="table" style="padding-bottom: 0;" />
    </div>
    <el-row type="flex" justify="end">
      <el-pagination
        v-show="list.total > 0"
        :current-page.sync="page"
        :page-size="perPage"
        :total="list.total"
        :small="true"
        :page-sizes="[20, 50, 100]"
        layout="total, prev, pager, next, sizes, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-row>
  </div>
</template>

<script>
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import PlatformIcon from '@/components/Common/platformIcon';
import TagSelect from '@/components/Common/tagSelect';
import { getUpOnlineAccountList } from '@/api/upOnline';
import TableAdaptive from '@/mixins/tableAdaptive';
import mobileTable from '@/mixins/mobileTable';
import { journalStatusFilter } from '@/utils/const/resouce';
import { cooperationStatusFilter } from '@/utils/accountCommonData';
import { signStatusFilter, getSignUpColor } from '@/filters/status';
import { numberTextFormat, moneyFilter } from '@/filters/number';

export default {
  components: { Title, EmptyPlaceholder, PlatformIcon, TagSelect },
  filters: { numberTextFormat, moneyFilter, journalStatusFilter, cooperationStatusFilter, signStatusFilter },
  mixins: [TableAdaptive, mobileTable],
  data() {
    return {
      page: 1,
      perPage: 20,
      paramsObj: {},
      listLoading: false,
      singleSelect: null,
      list: {
        items: [],
        total: 0,
        isInit: true
      },
      idKey: 'resourceId'
      // resourceId: null
    };
  },
  computed: {
    filterList() {
      const arr = [
        { keyword: 'accountName', name: '账号名称', labelWidth: '100px', type: 'input' },
        { keyword: 'accountId', name: '账号ID', labelWidth: '100px', type: 'input' },
        { keyword: 'platformId', name: '平台', type: 'select', options: [
          { value: 5, label: '小红书' },
          { value: 1, label: '抖音' },
          { value: 3, label: '微博' },
          { value: 34, label: 'B站' },
          { value: 15, label: '快手' },
          { value: 4, label: '微信' },
          { value: 18, label: '微信视频号' }
        ] }
      ];
      return arr;
    },
    tableOutsideHeight() {
      return this.showMobilePage ? 220 : 324;
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    getColor(status) {
      return getSignUpColor(signStatusFilter(status));
    },
    formatParams() {
      const params = _.cloneDeep(this.paramsObj);
      params.page = this.page;
      params.perPage = this.perPage;
      return params;
    },
    fetchData(reset = false) {
      this.listLoading = true;
      if (reset) this.page = 1;
      const params = this.formatParams();
      getUpOnlineAccountList(params).then(res => {
        this.listLoading = false;
        if (res.code !== 200) {
          this.$message.error(res.message);
          return;
        }
        this.list = res.data;
        this.list.isInit = false;
      }).catch(err => {
        this.listLoading = false;
        this.list.isInit = false;
        console.log(err);
      });
    },
    queryClick() {
      this.fetchData(true);
    },
    queryEmpty() {
      this.paramsObj = {};
      this.fetchData(true);
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.fetchData();
    },
    change(e, row) {
      this.$emit('changeSelect', row);
    },
    toAccount(resourceId) {
      const routeUrl = this.$router.resolve({
        name: 'detailResource',
        params: { resourceId }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>

<style lang="scss" scoped>
.el-pagination {
  display: flex;
  align-items: center;
  &::v-deep {
    .el-pagination__sizes {
      height: 28px !important;
    }
  }
}
.mobile-table-list {
  padding-top: 16px;
}
.title-tip{
  font-weight: normal;
  color: #999;
  font-size: 14px;
  margin: 0 4px 0 6px;
}
.filter {
  margin:10px 0 16px;
}
</style>
